<template>
  <div class="row">
    <div class="col-md-12">
      <FrontSideTable
        v-show="currentView === BRIDGE_VIEW"
        ref="maintainBridgeTable"
        dataUrl="/maintain/getMaintainBridgeList"
        :dataParam="{maintainId:maintain.id}"
        :tableTitle="maintain.name + '桥梁列表'"
        :columns="columns"
        searchHint="输入关键字搜索，多个关键字用空格隔开"
        :searchProps="searchProps"
        @onBack="handleBack"
        @onCreated="handleCreated"
        :addable="false"
        customButton
        customFormDialog
        canBack>

        <!--按钮区域-->
        <template slot="buttonArea">
          <el-button class="btn btn-primary" @click="handleMaintainBridgeAdd">养护桥梁选择</el-button>
        </template>

        <!--操作列-->
        <template slot="afterColumns">
          <el-table-column label="操作" align="center" width="70">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleDisease(scope.row)">病害</el-button>
            </template>
          </el-table-column>
        </template>

        <!--对话框区域-->
        <template slot="dialog">
          <el-dialog title="桥梁选择" size="large" v-model="isBridgeDialogVisible" :close-on-click-modal="false">
            <Table
              ref="bridgeTable"
              v-loading="loadingBridgeTable"
              title="桥梁列表"
              :pageData="bridgePageData"
              searchHint="输入关键字搜索，多个关键字用空格隔开"
              @sizeChange="handleBridgeTableSizeChange"
              @pageTurning="handleBridgeTablePageTurning"
              @sortChange="handleBridgeTableSortChange"
              @filterChange="handleBridgeTableFilterChange"
              @search="handleBridgeTableSearch"
              @select="handleBridgeSelect"
              @selectAll="handleBridgeSelectAll">
              <!--选择列-->
              <el-table-column type="selection" width="50"></el-table-column>
              <!--表格主体内容-->
              <el-table-column v-for="col of bridgeColumns"
                               align="center"
                               :key="col.prop"
                               :prop="col.prop"
                               :label="col.label"
                               :width="col.width"
                               :sortable="col.sortable">
              </el-table-column>
              <!--可筛选列-->
              <el-table-column align="center"
                               prop="bridgeEvaluationLevel"
                               column-key="bridgeEvaluationLevel"
                               label="评定等级"
                               width="150"
                               :filters="[{text:'1类', value:1},
                               {text:'2类', value:2},
                               {text:'3类', value:3},
                               {text:'4类', value:4},
                               {text:'5类', value:5}]"
                               filter-placement="bottom">
              </el-table-column>
            </Table>
            <!---对话框按钮去-->
            <div slot="footer" class="dialog-footer">
              <el-button @click="isBridgeDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="updateMaintainBridge" :loading="isBridgeDialogLoading">确 定</el-button>
            </div>
          </el-dialog>
        </template>
      </FrontSideTable>

      <!--病害视图-->
      <MaintainBridgeDisease
        v-if="currentView === DISEASE_VIEW"
        :bridge="currentBridge"
        @onBack="handleDiseaseBack"
      >
      </MaintainBridgeDisease>
    </div>
  </div>
</template>

<script>
  import FrontSideTable from "../template/FrontSideTable.vue"
  import Table from "../../components/content/bridge/Table.vue"
  import MaintainBridgeDisease from "../template/MaintainBridgeDisease.vue"
  import {doGet, doPost} from "../../assets/js/utils/RequestUtils"
  import {ADD} from "../../assets/js/enum/FunctionType"
  import {getAuthorizedFunction} from "../../assets/js/global"

  /** 桥梁选择数据地址 */
  const BRIDGE_URL = "/bridge/bridge/getBridgePageDataWithEvaluation";

  /** 桥梁分类数据加载地址 */
  const BRIDGE_CATEGORY_URL = "/maintain/getBridgeCategoryList";

  /** 桥梁添加地址 */
  const MAINTAIN_BRIDGE_ADD_URL = "/maintain/addMaintainBridge";

  /** 桥梁视图 */
  const BRIDGE_VIEW = 0;

  /** 病害视图 */
  const DISEASE_VIEW = 1;

  export default {
    name:"MaintainBridge",
    props:{
      maintain:{
        type:Object,
        required:true
      }
    },
    data() {
      return {
        currentView:BRIDGE_VIEW,
        currentBridge:null,
        bridgeCategoryFilters:{text:"", value:""},
        //桥梁选择对话框参数
        bridgePageData:{
          data:[],
          pageSize:10,
          total:0,
          currentPage:1
        },
        bridgeSearchValues:[],
        bridgeSortProp:"",
        bridgeOrder:"",
        bridgeFilter:{prop:"", values:[]},
        loadingBridgeTable:false,
        isBridgeDialogVisible:false,
        bridgeColumns:[
          {prop:"name", label:"桥名"},
          {prop:"roadNo", label:"路线号", sortable:"custom"},
          {prop:"fullAddressName", label:"所在地"},
          {prop:"unitsName", label:"管养单位"},
          {prop:"inspectionDate", label:"检查时间"}
        ],
        selectedBridgeList:[],
        isBridgeDialogLoading:false,
        //桥梁表参数
        columns:[
          {prop:"name", label:"桥名"},
          {prop:"roadNo", label:"路线号", width:"150", sortable:true},
          {prop:"bridgeCategoryName", label:"桥梁类别", width:"150"},
          {prop:"unitsName", label:"管养单位"},
          {prop:"bridgeEvaluationLevel", label:"评定等级", width:"150", sortable:true, filters:[
            {text:"1类", value:1},
            {text:"2类", value:2},
            {text:"3类", value:3},
            {text:"4类", value:4},
            {text:"5类", value:5}
          ]},
          {prop:"inspectionDate", label:"检查时间", width:"150"},
          {prop:"cost", label:"养护费用(元)", width:"150"}
        ],
        searchProps:["name", "roadNo", "unitsName"],
        /** 几个常量 */
        BRIDGE_VIEW,
        DISEASE_VIEW
      }
    },
    methods:{
      handleBack() {
        this.$emit("onBack");
      },
      handleCreated(bridgeList) {
        this.selectedBridgeList = bridgeList;
      },
      handleMaintainBridgeAdd() {
        this.selectedBridgeList = [];
        this.fetchBridgePageData();
        this.isBridgeDialogVisible = true;
      },
      handleBridgeTableSizeChange(pageSize) {
        this.bridgePageData.pageSize = pageSize;
        this.fetchBridgePageData();
      },
      handleBridgeTablePageTurning(index) {
        this.bridgePageData.currentPage = index;
        this.fetchBridgePageData();
      },
      handleBridgeTableSortChange({column, prop, order}) {
        this.bridgeSortProp = prop;
        this.order = order;
        this.fetchBridgePageData();
      },
      handleBridgeTableFilterChange(filter) {
        this.bridgeFilter = filter;
        this.fetchBridgePageData();
      },
      handleBridgeTableSearch(value) {
        this.bridgeSearchValues = value.split(" ");
        this.fetchBridgePageData();
      },
      handleBridgeSelect(selection, row) {
        let index = this.selectedBridgeList.findIndex(item=>item.id === row.id);
        if(index > 0) this.selectedBridgeList.splice(index, 1);
        else this.selectedBridgeList.push(row);
      },
      handleBridgeSelectAll(selection) {
        if(selection.length === 0) {
          this.selectedBridgeList = this.selectedBridgeList.filter(item=>!this.bridgePageData.data.find(i=>i.id === item.id));
        } else {
          selection.forEach(item=>{
            if(!this.selectedBridgeList.find(i=>i.id === item.id)) {
              this.selectedBridgeList.push(item);
            }
          })
        }
      },
      handleDisease(bridge) {
        this.currentBridge = bridge;
        this.currentView = DISEASE_VIEW;
      },
      handleDiseaseBack() {
        this.currentView = BRIDGE_VIEW;
        if(this.$refs["maintainBridgeTable"]) this.$refs["maintainBridgeTable"].fetchData();
      },
      fetchBridgePageData() {
        this.loadingBridgeTable = true;
        doGet(BRIDGE_URL, {
          data:{
            pageSize:this.bridgePageData.pageSize,
            currentPage:this.bridgePageData.currentPage,
            searchArray:this.bridgeSearchValues,
            sortProp:this.bridgeSortProp,
            order:this.bridgeOrder,
            filterProp:this.bridgeFilter.prop,
            filterValues:this.bridgeFilter.values
          },
          component:this
        })
          .then(response=>this.bridgePageData = response)
          .finally(()=>{
            this.checkDefaultRows();
            this.loadingBridgeTable = false;
          })
      },
      fetchBridgeCategoryData() {
        doGet(BRIDGE_CATEGORY_URL, {component:this}).then(response=>{this.bridgeCategoryFilters = response.map(item=>{return {text:item.name, value:item.id};});});
      },
      checkDefaultRows() {
        if(this.$refs["bridgeTable"]) {
          this.bridgePageData.data.forEach(item=>{
            if(this.selectedBridgeList.find(bridge=>bridge.id === item.id)) {
              this.$refs["bridgeTable"].toggleRowSelection(item, true);
            } else {
              this.$refs["bridgeTable"].toggleRowSelection(item, false);
            }
          })
        }
      },
      updateMaintainBridge() {
        this.isBridgeDialogLoading = true;
        doPost(MAINTAIN_BRIDGE_ADD_URL, {
          data:{
            maintainId:this.maintain.id,
            bridgeList:this.selectedBridgeList
          },
          menuFunctionId:getAuthorizedFunction(this, ADD),
          component:this
        })
          .then(response=>this.$message({message: response.message, type: response.status.toLowerCase()}))
          .finally(()=>{
            this.isBridgeDialogLoading = false;
            this.isBridgeDialogVisible = false;
            if(this.$refs["maintainBridgeTable"]) this.$refs["maintainBridgeTable"].fetchData();
          });
      }
    },
    mounted() {
      this.fetchBridgeCategoryData();
    },
    components:{FrontSideTable, Table, MaintainBridgeDisease}
  }
</script>



// WEBPACK FOOTER //
// MaintainBridge.vue?3ed6a96a
